資料客製化（Customizing Data）:
在vue定義資料時進行客製化的處理，這使得可以在設定或獲取資料之前進行轉換或驗證。這樣可以保持資料的一致性和正確性。
1. 自定義組合變數(computed):
computed 是一個 Vue 實例的屬性，用於設置一個「計算屬性」，它可以基於現有的資料屬性進行計算，並返回一個新的值。
範例如下:
Html:

<div id="app">
  <p>半徑: {{ radius }}</p>
  <p>面積: {{ area }}</p>
</div>

Js:

new Vue({
  el: '#app',
  data: {
    radius: 5
  },
  computed: {
    area: function() {
      return Math.PI * Math.pow(this.radius, 2);
    }
  }
});

呈現畫面:

在這個例子中，我們有一個 radius =5，以及一個 area 的計算屬性，會根據radius計算圓的面積。
當 radius 改變時，area 會自動重新計算。

2. get/set方法:
建立具有資料雙向綁定特性的自定義組合變數。
get方法:定義變數的計算
set方法: 為一種反向計算處理。
在 Vue.js 中，使用 set 方法時，可以透過一個值來更新多個相依的資料屬性，這就是所謂的反向計算處理。
範例如下:
Html:

<div id="app">
    <input type="text" v-model="fullName"> <!-- 用 v-model 雙向綁定計算屬性 -->
    <p>First Name: {{ firstName }}</p>
    <p>Last Name: {{ lastName }}</p>
    <p>Full Name: {{ fullName }}</p>
  </div>

Js:

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      get: function() {
        return this.firstName + ' ' + this.lastName;
      },
      set: function(value) {
        const names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
});

呈現畫面:

範例中使用了 v-model 指令來實現雙向綁定，這樣當你在輸入框中輸入完整名字時，會同時更新 firstName 和 lastName 的值。
另外在畫面中顯示了 firstName、lastName 和 fullName 這三個資料屬性的值，讓你可以在畫面上看到計算屬性的效果。